<template>
  <view class="home">
    <view class="head">
      <view class="search">
        <uni-icons type="scan" size="40" color="white"></uni-icons>
        <view class="custom-search">
          <uni-icons
            type="search"
            size="20"
            color="#999"
            class="search-icon"
          ></uni-icons>
          <uni-search-bar
            :radius="100"
            v-model="searchValue"
            @confirm="handleSearch"
            placeholder="搜索词"
            bgColor="#fff"
            class="search-bar"
          ></uni-search-bar>
        </view>
        <view class="message-icon-wrap">
          <uni-icons type="email" size="40" color="#fff"></uni-icons>
          <uni-badge
            :text="messageCount"
            type="error"
            size="small"
            max-num="99"
            offset="[-3, -3]"
          ></uni-badge>
        </view>
      </view>
      <view class="swiper-container">
        <swiper
          class="swiper-box"
          :autoplay="true"
          interval="5000"
          :indicator-dots="true"
          indicator-color="#fff"
          indicator-active-color="#666"
          duration="500"
        >
          <swiper-item>
            <image src="../../static/swiper.png" mode="aspectFill" />
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="content">
      <!-- 邀请码 -->
      <view class="inviation">
        <image
          src="../../static/MorenTx.png"
          mode="scaleToFill"
        />
        <view class="name">点金购您的购物好帮手</view>
        <button class="btn">邀请码</button>
      </view>
      <!-- 分类 -->
      <view class="classify-container">
        <view class="classify">
          <image
            src="../../static/egg.png"
            mode="scaleToFill"
          />
          <view class="title">精品区</view>
        </view>
      </view>
      <!-- 拍卖区域 -->
      <view class="auction-area" @click="handleBidding">
        <view class="auction-left">
          <view class="auction-title">参拍预约中</view>
          <view class="date">
            <!-- ✅ 动态显示当前日期 -->
            <view>{{ currentDate }}</view>
            <view style="margin-top: 5rpx;">预约时间 早场:8:00-9:50</view>
            <view style="margin-top: 5rpx;">销售时间 早场:10:00-11:00</view>
            <!-- ✅ 动态倒计时 -->
            <view class="stopDate" style="margin-top: 5rpx;">距停止预约:{{ countdown }}</view>
          </view>
        </view>
        <image
          src="../../static/auction.png"
          mode="scaleToFill"
          style="width: 242rpx;height: 242rpx;margin-right: 44rpx;margin-top: 20rpx;"
        />
      </view>
    </view>
    <!-- 自定义底部 TabBar -->
    <CustomTabBar :selected="1" />
  </view>
</template>

<script setup>
import CustomTabBar from "@/components/customTabBar.vue";
import uniIcons from "@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue";
import uniSearchBar from "@dcloudio/uni-ui/lib/uni-search-bar/uni-search-bar.vue";
import uniBadge from "@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue";
import { ref, onMounted, onUnmounted } from "vue";
import { Local } from "@/utils/storage";
import { onShow } from "@dcloudio/uni-app";

// 跳转拍卖页面
const handleBidding = () => {
  uni.navigateTo({ url: '/subPackage/biddingArea/index' });
};

// 判断是否登录，没有就跳转登录页面
// onShow(() => {
//   const token = Local.get('token');
//   if (!token) {
//     uni.showToast({ title: "暂未登录", icon: "none" });
//     setTimeout(() => {
//       uni.navigateTo({ url: '/subPackage/login/phoneLogin' });
//     }, 1000);
//   }
// });

const searchValue = ref("");
const messageCount = ref(100);

// ✅ 当前日期（年月日 星期）
const currentDate = ref("");

// ✅ 倒计时（格式：hh:mm:ss）
const countdown = ref("00:00:00");

let timer = null;

// 更新当前日期
const updateCurrentDate = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1;
  const day = now.getDate();
  const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
  const week = weekdays[now.getDay()];
  currentDate.value = `${year}年${month}月${day}日 ${week}`;
};

// 更新倒计时（目标：当天 9:50）
const updateCountdown = () => {
  const now = new Date();
  const target = new Date(now);
  target.setHours(9, 50, 0, 0); // 早场停止预约时间

  // 已过 9:50，停止倒计时
  if (now >= target) {
    countdown.value = "00:00:00";
    return;
  }

  const diff = target - now;
  const hours = Math.floor(diff / (1000 * 60 * 60));
  const minutes = Math.floor((diff / (1000 * 60)) % 60);
  const seconds = Math.floor((diff / 1000) % 60);

  countdown.value = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
};

// 启动定时器
const startTimer = () => {
  updateCurrentDate();   // 立即更新一次
  updateCountdown();
  timer = setInterval(() => {
    updateCurrentDate();
    updateCountdown();
  }, 1000); // 每秒更新
};

// 清除定时器
const clearTimer = () => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
};

// 组件挂载后启动
onMounted(() => {
  startTimer();
});

// 组件卸载时清除
onUnmounted(() => {
  clearTimer();
});

const handleSearch = () => {
  console.log("搜索内容:", searchValue.value);
};
</script>

<style lang="scss" scoped>
.home {
  .head {
    background-color: blueviolet;
    height: 500rpx;
    width: 100%;
    position: relative;
    border-radius: 40rpx;
    .search {
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      position: absolute;
      top: 50rpx;
      left: 40rpx;

      .custom-search {
        position: relative;
        display: flex;
        align-items: center;
        background-color: #f5f5f5;
        border-radius: 30px;
        overflow: hidden;
        width: 65%;

        .search-icon {
          position: absolute;
          left: 10rpx;
          top: 17rpx;
          z-index: 2;
          pointer-events: none;
        }

        .search-bar {
          width: 70%;
          height: 70rpx;
          display: flex;
          align-items: center;
          padding-left: 5rpx;
        }
      }
      .message-icon-wrap {
        position: relative;

        ::v-deep .uni-badge {
          position: absolute;
          top: -71rpx;
          left: -26rpx;
        }
      }
    }
    .swiper-container {
      position: absolute;
      top: 166rpx;
      left: 8%;
      width: 643rpx;
      height: 400rpx;
      border-radius: 40rpx;
      .swiper-box {
        width: 100%;
        height: 100%;
        image {
          width: 100%;
          height: 100%;
          border-radius: 40rpx;
        }
      }
    }
  }
  .content {
    padding: 0 20rpx;
    width: calc(100% - 40rpx);
    margin-top: 78rpx;
    .inviation {
      width: calc(100% - 30rpx);
      height: 87rpx;
      padding: 0 15rpx;
      background-color: rgb(152, 151, 253);
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      image {
        width: 61rpx;
        height: 61rpx;
        margin-left: 10rpx;
      }
      .name {
        width: 447rpx;
        color: #f5f5f5;
        font-size: 22rpx;
        margin-left: 20rpx;
      }
      .btn {
        background-color: rgb(87, 86, 179);
        width: 122rpx;
        height: 50rpx;
        border-radius: 30rpx;
        font-size: 20rpx;
        color: #f5f5f5;
      }
    }
    .classify-container {
      display: grid;
      gap: 20rpx;
      grid-template-columns: repeat(4, 1fr);
      flex-wrap: wrap;
      .classify {
        margin-top: 20rpx;
        padding: 0 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        image {
          width: 127rpx;
          height: 127rpx;
          border-radius: 15rpx;
        }
        .title {
          font-size: 26rpx;
        }
      }
    }
    .auction-area {
      margin-top: 40rpx;
      box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.3);
      width: 710rpx;
      height: 289rpx;
      border-radius: 28rpx;
      padding-top: 37rpx;
      display: flex;
      justify-content: space-between;
      .auction-title {
        width: 180rpx;
        height: 70rpx;
        background-color: rgb(230, 107, 0);
        color: aliceblue;
        border-top-right-radius: 25rpx;
        border-bottom-right-radius: 25rpx;
        padding-left: 20rpx;
        line-height: 70rpx;
      }
      .date {
        margin-top: 20rpx;
        margin-left: 20rpx;
        font-weight: 500;
      }
    }
  }
}
</style>